Introduction

Triada is a creative, professional, responsive HTML5 Coming Soon template, perfect to keep your audience informed about the official website launch. It has been built using the new Twitter Bootstrap3 framework and can be easily and rapidly customized. Triada is built with the latest HTML5 and CSS3 technologies, is well documented and easy to setup and customize.

Please do not forget to rate Triada on ThemeForest. This can be done in Downloads area. Just select Triada in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.

Getting Started

This guide is targeted at people, who have at least basic knowledge of html markup language. Furthermore css and javascript knowledge is advised. If you do not feel yourself well with understanding these technologies you should consider finding someone to assist you.

This template can't be installed into any of available CMS (Wordpress, Drupal, etc.).

This documentation will demonstrate the custom elements used in template and help you with their customization.

Installation

Template installation is pretty easy. All required files are in every version so you can delete unused. Here are the required steps:

Files Structure

Preloader

Each page of this template contains a preloader code by default.

									
<div class="preloader"><span></span></div>
								

Stucture Of The Site

The obligatory stucture of the site:

											
<div class="preloader"><span></span></div><!-- .preloader -->
 
<div class="background">
  <div class="layer"></div>
</div><!-- .background -->
 
<header class="site-header">
  ...
</header><!-- .site-header -->
 
<div class="main">
  <section id="id" class="section active">
	<div class="section-wrap">
	  <div class="section-content">
		<div class="container">
		  ...
		</div>
	  </div><!-- .section-content -->
	</div><!-- .section-wrap -->
  </section><!-- .section -->
  ...
</div><!-- .main -->
 
<footer class="site-footer">
  ...
</footer><!-- .site-footer -->
										

Header

Header consists of 3 elements – Logo, Navigation and Countdown.

Copy

1. <header class="site-header">
2. <div class="row header-wrap">
3. <div class="col-sm-5 header-box">
4. Menu
5. </div><!-- .header-box -->
7. <div class="col-sm-2 header-box logo-box text-center">
8. Logo
9. </div><!-- .header-box -->
11. <div class="col-sm-5 header-box text-right hidden-xs">
12. Countdown
13. </div><!-- .header-box -->
14. </div>
15. </header><!-- .site-header -->

Logo

Logo is located at the top-center of the template.

									
<div class="header-box logo-box text-center">
  <a href="index.html"><img src="img/logo-white.svg" width="68" height="57" alt=""></a>
</div><!-- .header-box -->
								

Navigation

Navigation switches between the page sections. The attribute meaning href="#link1" must respond to the section id.

									
<div class="header-box">
  <div id="main-menu" class="main-menu">
	<ul>
	  <li>
		<a href="#your-id">
		  Link 1
		</a>
	  </li>
	</ul>
  </div>
</div><!-- .header-box -->
									
									
<section id="your-id" class="section">
  content
</section><!-- .section -->
								

									
<div class="header-box">
  <div id="main-menu" class="main-menu">
	<ul>
	  <li>
		<a href="#link1">
		  <span class="hidden-xs hidden-sm">Link 1</span>
		  <span class="hidden-md hidden-lg about-icon">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve" width="25" height="25">
			  <path fill="#333333" d="M12.5,25C5.6,25,0,19.4,0,12.5C0,5.6,5.6,0,12.5,0C19.4,0,25,5.6,25,12.5C25,19.4,19.4,25,12.5,25L12.5,25z
			  M12.5,0.9C6.1,0.9,0.9,6.1,0.9,12.5c0,6.4,5.2,11.6,11.6,11.6c6.4,0,11.6-5.2,11.6-11.6C24.1,6.1,18.9,0.9,12.5,0.9L12.5,0.9z
			  M11.6,20.2V9.3h1.8v10.9H11.6L11.6,20.2z M12.5,7.5c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4
			  C13.9,6.9,13.3,7.5,12.5,7.5L12.5,7.5z"/>
			</svg>
		  </span>
		</a>
	  </li><!--
	  --><li>
		<a href="#link2">
		  <span class="hidden-xs hidden-sm">Link 2</span>
		  <span class="hidden-md hidden-lg contact-icon">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29 18" enable-background="new 0 0 29 18" xml:space="preserve" width="29" height="18">
			  <path fill="#333333" d="M26.4,0H2.6C1.2,0,0,1.2,0,2.6v12.9C0,16.8,1.2,18,2.6,18h23.7c1.5,0,2.6-1.1,2.6-2.6V2.6
			  C29,1.2,27.8,0,26.4,0L26.4,0z M26.4,1c0.2,0,0.3,0,0.4,0.1l-12.3,9.5L2.2,1.1C2.3,1.1,2.5,1,2.6,1H26.4L26.4,1z M2.6,17
			  c-0.2,0-0.3,0-0.4-0.1l8.4-6.5L9.8,9.7l-8.4,6.5c-0.2-0.2-0.3-0.5-0.3-0.8V2.6c0-0.3,0.1-0.6,0.3-0.8l13.2,10.2L27.7,1.7
			  c0.2,0.2,0.3,0.5,0.3,0.8v12.9c0,0.3-0.1,0.6-0.3,0.8l-8.5-6.5l-0.8,0.7l8.4,6.5c-0.1,0-0.3,0.1-0.4,0.1H2.6L2.6,17z"/>
			</svg>
		  </span>
		</a>
	  </li>
	</ul>
  </div>
</div><!-- .header-box -->
								

Countdown

Insert the final date, to which the timer will count, in the data-attibute data-date="Date". More detailed information is available on the off.site.

									
<div class="header-box text-right hidden-xs">
  <div class="text-right">
	<div class="countdown-box">
	  <div class="countdown" data-date="date"></div>
	</div>
  </div>
</div><!-- .header-box -->
								

Footer

Copy

										
<footer class="site-footer">
  <div class="container-fluid text-center">
	<div class="copyright">text</div>
	<div class="social">
	  <a href="#"><i class="fa fa-facebook"></i></a>
	  ...
	</div>
  </div>
</footer><!-- .site-footer -->
									

Elements

Our theme provides different html elements, which can be used in any way with any customization.

Notify Me

By default all the information from this form is collected into the file emails.txt which is located in the root directory.

This file also must have 'Write' permissions

									
<form class="under-construction" method="post">
		  <div class="form-group email">
			<input class="form-control email" type="email" name="email" placeholder="Insert your e-mail">
		  </div>
		  <button data-hover="Send" class="btn btn-default btn-block progress-button send-email">
			<span class="button-label">Send</span>
			<span class="success">
			  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29 23" enable-background="new 0 0 29 23" xml:space="preserve">
				<polyline fill="#FFFFFF" points="0.3,10.2 1.8,8.8 11.4,19.3 27.4,0.4 28.9,1.7 12.9,20.6 11.5,22.3 9.9,20.6 0.3,10.2 "/>
			  </svg>
			</span>
			<span class="error"></span>
			<span class="progress"></span>
		  </button>
		  <div class="clearfix"></div>
		  <span class="form-message"></span>
		</form>
								

Warning! For better data security, it is recommended to change the name of the file and in the file /php/u-c.php change this string $file = fopen('../emails.txt','a+');

To make the form send data to the MailChimp Service, replace the given form with one, generated at MailChimp Sevice. It must look the next way:

									
<form action="" method="post" name="mc-embedded-subscribe-form" class="validate mailchimp" target="_blank" novalidate>
		  <div id="mc_embed_signup_scroll">
			<div class="mc-field-group form-group">
			  <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span></label>
			  <input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL">
			</div>
			<div id="mce-responses" class="clear">
				<div class="response" id="mce-error-response" style="display:none"></div>
				<div class="response" id="mce-success-response" style="display:none"></div>
			</div>
			<div style="position: absolute; left: -5000px;">
			  <input type="text" name="b_69007f000c70b89e124b9308d_1225ba8aee" tabindex="-1" value="">
			</div>
			<div class="clearfix">
			  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-default">
			</div>
		  </div>
		</form>
								

Besides, open the file js/main.js and replace the link http://us10.list-manage.com/subscribe/post?u=69007f000c70b89e124b9308d&id=1225ba8aee with your own one.

Contact Form

All data from this form is sent to the email, which can be edited in the file php/contact.php.

Copy

										
<form class="contact-form" method="post">
				  <div class="row">
					<div class="col-sm-6 form-group name">
					  <input type="text"
						class="form-control"
						name="name"
						placeholder="Name"
						data-animation="fadeInLeft"
						data-animation-delay="100"
						data-out-animation="fadeOutLeft"
						data-out-animation-delay="900">
					</div>
					
					<div class="col-sm-6 form-group email">
					  <input type="email"
						class="form-control"
						name="email"
						placeholder="Email"
						data-animation="fadeInLeft"
						data-animation-delay="100"
						data-out-animation="fadeOutLeft"
						data-out-animation-delay="900">
					</div>
				  </div>
	  
				  <div class="form-group comment">
					<textarea class="form-control"
					  name="comment"
					  placeholder="Message"
					  data-animation="fadeInLeft"
					  data-animation-delay="100"
					  data-out-animation="fadeOutLeft"
					  data-out-animation-delay="900"></textarea>
				  </div>
				  
				  <div class="button-box text-center">
					<button type="submit"
					  data-hover="Send"
					  class="btn btn-white progress-button btn-submit"
					  data-animation="fadeInDown"
					  data-animation-delay="900"
					  data-out-animation="fadeOutUp"
					  data-out-animation-delay="100">
					  <span class="button-label">Send</span>
					  <span class="success">
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29 23" enable-background="new 0 0 29 23" xml:space="preserve">
						  <polyline fill="#FFFFFF" points="0.3,10.2 1.8,8.8 11.4,19.3 27.4,0.4 28.9,1.7 12.9,20.6 11.5,22.3 9.9,20.6 0.3,10.2 "/>
						</svg>
					  </span>
					  <span class="error"></span>
					  <span class="progress"></span>
					</button>
					
					<div class="clearfix"></div>
					<span class="form-message"></span>
				  </div>
				</form>
									

Map

Copy

<div
	class="map-canvas"
	data-zoom="6"
	data-lat="40.748441"
	data-lng="-73.985664"
	data-title="Title"
	data-content="Content"></div>

You can customize the element map-canvas with these attributes:

1. data-zoom - map zoom
2. data-lat - map lattitude
3. data-lng - map longtitude
4. data-type - map type, can be satellite, hybrid, terrain
5. data-scrollwheel - opportunity to scroll the map with mouse wheel
6. data-title - marker title
7. data-content - marker description

Carousel

The carousel may contain the elements, which you can find on our demo pages.

Copy

										
<div class="carousel-box">
  <div class="carousel">
	<div class="item" data-animation="fadeInUp" data-animation-delay="100" data-out-animation="fadeOutUp" data-out-animation-delay="100">
	  ...
	</div>
  </div><!-- .carousel -->
  
  <div class="carousel-controls">
	<a href="#" class="nav-item prev">
	  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 11" enable-background="new 0 0 10 11" xml:space="preserve" width="10" height="11">
		<path fill="#ffffff" d="M10,6H0V5h10V6L10,6z M0,6V5l5-5l1,0L0,6z M5,11L0,6V5l6,6L5,11z"/>
	  </svg>
	</a>
	<a href="#" class="nav-item next">
	  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 11" enable-background="new 0 0 10 11" xml:space="preserve" width="10" height="11">
		<path fill="#ffffff" d="M0,6V5h10v1H0L0,6z M4,0h1l5,5v1L4,0z M4,11l6-6v1l-5,5L4,11z"/>
	  </svg>
	</a>
  </div>
</div><!-- .carousel-box -->
									

Full Video

Copy

										
<a href="#"
  class="show-video"
  data-toggle="modal"
  data-target="#video">
  <img src="img src" alt="">
  <span class="icon"><i class="fa fa-play"></i></span>
</a><!-- .show-video -->
 
<div class="modal fade full-modal" id="video" tabindex="-1" role="dialog" aria-hidden="true">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	<span aria-hidden="true">×</span>
  </button>
  
  <div class="modal-dialog">
	<div class="container modal-content">
	  <div class="content-wrap">
		<div class="content-align">
		  <div class="video-box vimeo-video text-center" data-autoplay="true">
			<iframe src="" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
		  </div>
		</div>
	  </div>
    </div>
  </div>
</div><!-- .full-modal -->
									

Twitter Widget

Copy

										
<div class="twitter-widget">
  <a class="twitter-timeline"
	 width="100%"
	 href="https://twitter.com/ItemBridge"
	 data-widget-id="446943467755696128"
	 data-tweet-limit="1"
	 data-show-replies="false"
	 data-chrome="noheader nofooter noborders noscrollbar transparent">
	@ItemBridge
  </a>
</div>
									

Animation

You can choose the animation type for every page element – how it will appear after page downloading and how it will disappear after switching page sections. For this you will need to use the necessary attribute:

• data-animation - animation while downloading
• data-animation-delay - animation delay while downloading
• data-out-animation - animation while switching to other page section
• data-out-animation-delay - animation delay while switching to other page section

You can check how these animation types look like here.

								
<a href="#"
  data-animation="fadeInDown"
  data-animation-delay="600"
  data-out-animation="fadeOutUp"
  data-out-animation-delay="600">Link</a>
								

Backgrounds

Our template supports different types of background. It may be just an image, the image with color overlay and video background. So, how we can insert our background into the html code? Have a look:

								
<div class="background">
  <div class="layer background-image"></div>
  
  <div class="layer background-overlay"></div>
</div><!-- .background -->
								

Background Image

Apply necessary background image in the file _background.scss for the class background-image.

<div class="background">
  <div class="layer background-image"></div>
</div><!-- .background -->
								

Background Slider

The slideshow has the following settings:

• data-timeout - the delay between the slides change
• data-animate-in - starting slide animation
• data-animate-out - ending slide animation

You can check how these animation types look like here.

<div class="layer background-slider" data-timeout="2000" data-animate-in="fadeIn" data-animate-out="fadeOut">
  <div class="item" style="background-image: url(img/slide-1.jpg);"></div>
  <div class="item" style="background-image: url(img/slide-2.jpg);"></div>
</div>
								

Background Overlay

Apply necessary color in the file _background.scss fo the class background-overlay.

									
<div class="background">
  <div class="layer background-overlay"></div>
</div><!-- .background -->
								

Video Background

Indicate the path to the video in 3 formats in the tag source.

									
<div class="background">
  <div class="layer background-video">
	<video autoplay="" muted="" loop="">
	  <source src="video.ogv" type="video/ogg">
	  <source src="video.webm" type="video/webm">
	  <source src="video.mp4" type="video/mp4">
	</video>
  </div>
</div><!-- .background -->
								

YouTube Video Background

Indicate your video id in the data-attribute data-video.

									
<div class="background">
  <div class="layer background-video" data-video="id"></div>
</div><!-- .background -->
								

Retina

Retina Ready is a feature for displaying the high resolution images on the modern devices. It is created to show the true view of the HD images.

In our theme to enable the Retina for images you should have two images:

Both images must be in the same folder!

So, how we can enable it in our html template? You should insert a class replace-2x into the 'img' tag. Example:

<img class="replace-2x" src="images/slide-2.jpg" alt="">

This is an example of CSS code that displays how we can connect our Retina image to the original image of the background:

.part-2 {
  background-image: url('../images/slider/slide-2.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .part-2 { background-image: url('../images/slider/slide-2@2x.jpg'); 
  background-size: cover; }
}

SCSS

All SCSS files are located in the folder /sass/. SCSS is a CSS preprocessor that adds many features like variables, mixins, imports, color manipulation, functions and tons of other powerful features.

The entire compiler comes in a single class file ready for including in any kind of project in addition to a command line tool for running the compiler from the terminal.

The configuration of the paths for compilation is located in the file config.rb. The structure:

• /bootstrap/ - folder with bootstrap variables
• bootstrap.scss - file that imports all variables from all files
• style.scss - imports all styles
• _theme-variables.scss - file with variables used in theme styles
• _typography.scss - the customization of fonts
• _background.scss - file with background styles
• _carousels.scss - file with carousels styles
• _content.scss - file with content styles
• _footer.scss - file with footer styles
• _header.scss - file with header styles
• _helper-classes.scss - file with helper classes styles
• _main.scss - file with main styles
• _preloader.scss - file with preloader styles
• _structure.scss - file with layout structue styles

CSS Files

JavaScript Files